﻿<template>
    <div class="esBudget-container">
        <el-dialog v-model="state.isShowDialog" draggable width="769px" @close="closeDialog">
            <template #header>
                <div style="color: #fff">
                    <el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle">
                        <ele-Edit/>
                    </el-icon>
                    <span> {{ props.title }} </span>
                </div>
            </template>
            <el-form :model="state.ruleForm" ref="ruleFormRef" size="default" label-width="80px" :rules="rules">
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="商户名称" prop="merchantId">
                            <el-select filterable v-model="state.ruleForm.merchantId" placeholder="请选择" class="w100">
                                <el-option v-for='item in state.merchantDict' :key='item.value' :label='item.label'
                                           :value='item.value'/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="产品编码" prop="code">
                            <el-input v-model="state.ruleForm.code" placeholder="请输入产品编码" class="w100"
                                      clearable/>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="产品名称" prop="name">
                            <el-input v-model="state.ruleForm.name" placeholder="请输入产品名称" class="w100"
                                      clearable/>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="产品简称" prop="alias">
                            <el-input v-model="state.ruleForm.alias" placeholder="请输入产品简称" class="w100"
                                      clearable/>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="运营商" prop="operatorPlatform">
                            <el-select v-model="state.ruleForm.operatorPlatform" placeholder="请选择" class="w100">
                                <el-option v-for='item in optionDict.operatorPlatformDict' :key='item.value'
                                           :label='item.label' :value='item.value'/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <!--          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">-->
                    <!--            <el-form-item label="产品类型" prop="arrivalType">-->
                    <!--              <el-radio-group v-model="state.ruleForm.cooperationType" @change="cooperationTypeControl">-->
                    <!--                <el-radio :label="1">官方报备</el-radio>-->
                    <!--                <el-radio :label="2">包的业务</el-radio>-->
                    <!--                <el-radio :label="3">三方业务</el-radio>-->
                    <!--              </el-radio-group>-->
                    <!--            </el-form-item>-->
                    <!--          </el-col>-->
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="省份" :prop="`province`">
                            <el-select v-model="state.ruleForm.province" filterable placeholder="省份"
                                       class="w100">
                                <el-option v-for='item in optionDict.provinceDict' :key='item.value'
                                           :label='item.label' :value='item.value'/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="信息费" prop="informationFee">
                            <el-input-number v-model="state.ruleForm.informationFee" :min="0" :max="9999"
                                             controls-position="right" placeholder="请输入信息费(分)" class="w100"/>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="集运价格" prop="consolidationPrice">
                            <el-input-number v-model="state.ruleForm.consolidationPrice" :min="0" :max="9999"
                                             controls-position="right" placeholder="请输入集运价格(分)" class="w100"
                                             @change="consolidationPriceControl"/>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="合作分成" prop="consolidationDivide">
                            <el-input-number v-model="state.ruleForm.consolidationDivide" :min="0" :max="100"
                                             controls-position="right" placeholder="请输入集运合作分成比例" class="w100"
                                             :disabled="state.ruleForm.cooperationType==3"
                                             @change="consolidationPriceControl"/>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="收入价格" prop="incomePrice">
                            <el-input-number v-model="state.ruleForm.incomePrice" :min="0" :max="9999"
                                             controls-position="right" placeholder="收入价格" class="w100" disabled/>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="商务分成" prop="businessDivide">
                            <el-input-number v-model="state.ruleForm.businessDivide" :min="0" :max="100"
                                             controls-position="right" placeholder="请输入商务分成" class="w100"
                                             :disabled="state.ruleForm.cooperationType==3"
                                             @change="consolidationPriceControl"/>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="商务费用" prop="businessExpenses">
                            <el-input-number v-model="state.ruleForm.businessExpenses" :min="0" :max="9999"
                                             controls-position="right" placeholder="商务费用" class="w100" disabled/>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="实际价格" prop="businessPrice">
                            <el-input-number v-model="state.ruleForm.businessPrice" :min="0" :max="9999"
                                             controls-position="right" placeholder="扣除商务费实际价格" class="w100"
                                             disabled/>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="客服费" prop="customerService">
                            <el-input-number v-model="state.ruleForm.customerService" :min="0"
                                             controls-position="right" placeholder="请输入信息费(分)" class="w100"/>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="退费率" prop="refundRate">
                            <el-input-number v-model="state.ruleForm.refundRate" :min="0" :max="100"
                                             controls-position="right" placeholder="请输入退费率" class="w100"/>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="总用户数" prop="userNumber">
                            <el-input-number v-model="state.ruleForm.userNumber" :min="0"
                                             controls-position="right" placeholder="请输入用户数" class="w100"/>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="推广单价" prop="promotionUnitPrice">
                            <el-input-number v-model="state.ruleForm.promotionUnitPrice" :min="0" :max="9999"
                                             controls-position="right" placeholder="请输入推广单价(分)" class="w100"
                                             @change="promotionAmountControl"/>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="扣量率" prop="deductionRate">
                            <el-input-number v-model="state.ruleForm.deductionRate" :min="0" :max="100"
                                             controls-position="right" placeholder="请输入扣量率" class="w100"
                                             @change="promotionAmountControl"/>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="推广金额" prop="promotionAmount">
                            <el-input-number v-model="state.ruleForm.promotionAmount" :min="0"
                                             controls-position="right" placeholder="请输入推广金额(分)" class="w100"
                                             disabled/>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="留存" prop="keep">
                            <el-input-number v-model="state.ruleForm.keep" :min="0"
                                             controls-position="right" placeholder="请输入留存数量" class="w100"/>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="几个月" prop="moonNumber">
                            <el-input-number v-model="state.ruleForm.moonNumber" :min="0"
                                             controls-position="right" placeholder="请输入几个月" class="w100"/>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"
                            v-if="state.ruleForm.moonNumber!=1">
                        <el-form-item label="留存率" prop="retentionRate">
                            <el-input-number v-model="state.ruleForm.retentionRate" :min="0" :max="100"
                                             controls-position="right" placeholder="请输入留存率" class="w100"/>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="备注">
                            <el-input v-model="state.ruleForm.remark" placeholder="请输入备注内容" clearable
                                      type="textarea"
                                      maxlength="255" style="word-break: break-all;" :autosize="{ minRows: 2 }"/>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
				<span class="dialog-footer">
					<el-button @click="cancel" size="default">取 消</el-button>
					<el-button type="primary" @click="submit" size="default">确 定</el-button>
				</span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup name="editEsBudgetProduct">

import {reactive, ref} from 'vue';
import {ElMessage} from 'element-plus';
import type {FormRules} from "element-plus";
import mittBus from '/@/utils/mitt';
import SysEsMerchantApi from '/@/api/exocytosis/merchant';
import {EsBudgetProduct, sysBaseDict} from '/@/api/models';
import SysEsBudgetProductApi from '/@/api/exocytosis/budget';
import {optionDict} from '/@/const/dict';

import commonFunction from '/@/utils/commonFunction';

// 定义变量内容
const {generateRandomLowercaseString} = commonFunction();
const props = defineProps({
    title: String,
});

const ruleFormRef = ref();
const state = reactive({
    merchantDict: [] as sysBaseDict[],
    isShowDialog: false,
    ruleForm: {} as EsBudgetProduct,
});

// 删除非必填规则
const rules = ref<FormRules>({
    merchantId: [{required: true, message: '请输入商户ID！', trigger: 'blur',},],
    name: [{required: true, message: '请输入产品名称！', trigger: 'blur',},],
    alias: [{required: true, message: '请输入产品简称！', trigger: 'blur',},],
    code: [{required: true, message: '请输入产品编码！', trigger: 'blur',},],
    operatorPlatform: [{required: true, message: '请输入运营商平台！', trigger: 'blur',},],
    province: [{required: true, message: '请选择省份！', trigger: 'blur',},],
    informationFee: [{required: true, message: '请输入信息费！', trigger: 'blur',},],
    consolidationPrice: [{required: true, message: '请输入集运价格！', trigger: 'blur',},],
    userNumber: [{required: true, message: '请输入用户数！', trigger: 'blur',},],
    // promotionAmount: [{ required: true, message: '请输入推广金额！', trigger: 'blur', },],
    moonNumber: [{required: true, message: '请输入报表周期！', trigger: 'blur',},],
    keep: [{required: true, message: '请输入留存数量！', trigger: 'blur',},],
    promotionUnitPrice: [{required: true, message: '请输入推广单价！', trigger: 'blur',},],
    deductionRate: [{required: true, message: '请输入扣量率！', trigger: 'blur',},],
});

// 打开弹窗
const openDialog = (row: EsBudgetProduct, conDition: string) => {
    // 商户字典
    merchantQuery();
    if (conDition == 'add') {
        state.ruleForm = row;
        state.isShowDialog = true;
        state.ruleForm.arrivalType = 1;
        state.ruleForm.cooperationType = 2;
        state.ruleForm.consolidationDivide = 100;
        state.ruleForm.businessDivide = 0;
        state.ruleForm.refundRate = 0;
        state.ruleForm.retentionRate = 100;
        state.ruleForm.deductionRate = 30;
        state.ruleForm.code = generateRandomLowercaseString(6);
    } else {
        state.ruleForm = row;
        state.isShowDialog = true;
        state.ruleForm.status = state.ruleForm.status == 1 ? '启用' : '停用';
    }
};

// 关闭弹窗
const closeDialog = () => {
    state.ruleForm.status = state.ruleForm.status == '启用' ? 1 : 2;
    mittBus.emit('submitRefresh');
    state.isShowDialog = false;
};

// 取消
const cancel = () => {
    state.ruleForm.status = state.ruleForm.status == '启用' ? 1 : 2;
    state.isShowDialog = false;
};

// 提交
const submit = () => {
    ruleFormRef.value.validate(async (valid: boolean, fields?: any) => {
        if (valid) {
            let res;
            // if (state.ruleForm.id != undefined && state.ruleForm.id > 0) {
            // 	// console.log(state.ruleForm.status, '之前');
            // 	if (state.ruleForm.status == '启用') {
            // 		state.ruleForm.status = 1
            // 	} else if (state.ruleForm.status == 1) {
            // 		state.ruleForm.status = 1
            // 	} else {
            // 		state.ruleForm.status = 2
            // 	}
            // 	// console.log(state.ruleForm.status, '之后');
            // 	res = await SysEsBudgetProductApi().editPost(state.ruleForm);
            // } else {
            // 	res = await SysEsBudgetProductApi().addPost(state.ruleForm);
            // }
            // 只添加不修改
            state.ruleForm.id = undefined;
            state.ruleForm.status = undefined;
            res = await SysEsBudgetProductApi().addPost(state.ruleForm);
            if (res.data.resCode != '0000')
                ElMessage.error(res.data.resMessage);
            else {
                ElMessage.success("操作成功");
                closeDialog();
            }
        } else {
            ElMessage({
                message: `表单有${Object.keys(fields).length}处验证失败，请修改后再提交`,
                type: "error",
            });
        }
    });
};

// 商户字典
const merchantQuery = async () => {
    await SysEsMerchantApi().queryAll().then((res) => {
        if (res.data.resCode === '0000')
            state.merchantDict = res.data.result ?? [];
    });
};

// 选择产品类型触发
// const cooperationTypeControl = (e) => {
//   if(e===3)
//   {
//     state.ruleForm.consolidationDivide= 100 ;
//     state.ruleForm.businessDivide= 0 ;
//     consolidationPriceControl()
//   }
// }

// 获取实际推广价格
const promotionAmountControl = () => {
    state.ruleForm.promotionAmount = state.ruleForm.promotionUnitPrice * (100 - state.ruleForm.deductionRate) / 100;
}

// 输入集运价格触发
const consolidationPriceControl = () => {
    state.ruleForm.incomePrice = state.ruleForm.consolidationPrice * state.ruleForm.consolidationDivide / 100;
    state.ruleForm.businessExpenses = state.ruleForm.consolidationPrice * state.ruleForm.businessDivide / 100
    state.ruleForm.businessPrice = state.ruleForm.incomePrice - state.ruleForm.businessExpenses;
    state.ruleForm.incomePrice = Math.round(state.ruleForm.incomePrice)
    state.ruleForm.businessPrice = Math.round(state.ruleForm.businessPrice)
    state.ruleForm.businessExpenses = Math.round(state.ruleForm.businessExpenses)
}
// 导出对象 将属性或者函数暴露给父组件
defineExpose({openDialog});
</script>
